export function newSvg(width: number, height: number, viewBox?: string): SVGSVGElement {
  const svg = document.createElementNS("http://www.w3.org/2000/svg", "svg");
  svg.setAttribute("width", width.toString());
  svg.setAttribute("height", height.toString());
  svg.setAttribute("viewBox", viewBox || `0 0 ${width} ${height}`);
  return svg;
}

export function newSvgEl<K extends keyof SVGElementTagNameMap>(name: K): SVGElementTagNameMap[K] {
  return document.createElementNS("http://www.w3.org/2000/svg", name);
}

export function newCircle(cx: number, cy: number, r: number, style?: Partial<CSSStyleDeclaration>) {
  const circle = newSvgEl("circle");
  circle.setAttribute("cx", cx.toString());
  circle.setAttribute("cy", cy.toString());
  circle.setAttribute("r", r.toString());
  style && Object.assign(circle.style, style);
  return circle;
}

export function newRect(x: number, y: number, width: number, height: number, style?: Partial<CSSStyleDeclaration>) {
  const rect = newSvgEl("rect");
  rect.setAttribute("x", x.toString());
  rect.setAttribute("y", y.toString());
  rect.setAttribute("width", width.toString());
  rect.setAttribute("height", height.toString());
  style && Object.assign(rect.style, style);
  return rect;
}

export function newRect1(x1: number, y1: number, x2: number, y2: number, style?: Partial<CSSStyleDeclaration>) {
  return newRect(x1, y1, x2 - x1, y2 - y1, style);
}
